<template>
  <div class="container">
      <div class="box">
            <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>商品信息新增</span>
                <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
            </div>
            <div class="wrap" :key="num">
                <div v-for="(item,index) in data" :key="index" class="text item">
                    <div>{{item.name}}：</div>
                    <el-input :type="item.type || 'text'"  :autosize='item.autosize' v-model="item.value">
                    </el-input>
                </div>
            </div>
            <div class="btns">
                <el-button type="primary" @click="sure">
                    确定
                </el-button>
                <el-button type="info" @click="clear">
                    清空
                </el-button>
            </div>
            </el-card>
      </div>
  </div>
</template>

<script>
import { insertGoodsList } from '@/api/shop'
export default {
data(){
    return {
        data: [
            {
                name: '商品编码',
                value: '',
                table: ''
            },
            {
                name: '商品简码',
                value: '',
                table: ''
            },
            {
                name: '商品名称',
                value: '',
                table: 'goodsName'
            },
            {
                name: '商品分类',
                value: '',
                table: ''
            },
            {
                name: '计量单位',
                value: '',
                table: ''
            },
            {
                name: '零售单价',
                value: '',
                table: 'price'
            },
            {
                name: '参考进价',
                value: '',
                table: ''
            },
            {
                name: '特价折扣',
                value: '',
                table: ''
            },
            {
                name: '最低折扣',
                value: '',
                table: ''
            },
            {
                name: '提成比例',
                value: '',
                table: ''
            },
            {
                name: '所属店铺',
                value: '',
                table: 'shopName'
            },
            {
                name: '店铺地址',
                value: '',
                table: 'shopSrc'
            },
            {
                name: '庫存数量',
                value: '',
                table: 'sales'
            },
            {
                name: '商品简介',
                value: '',
                type: 'textarea',
                autosize: true,
                placeholder: '请输入内容',
                table: ''
            },
            {
                name: '商品地址',
                value: '',
                table: 'goodsSrc'
            },
            {
                name: '商品图片地址',
                value: '',
                table: 'googdsImg'
            },
            {
                name: '运费设置',
                value: '',
                table: ''
            },
            {
                name: '商品标签',
                value: '',
                table: 'tagName'
            } 
        ],
        num: 0,
        queryModel:{
            goodsName: '',
            shopName: '',
            shopSrc: '',
            price: '',
            sales: '',
            goodsSrc: '',
            googdsImg: '',
            tagName: ''
        }
    }
},
methods:{
    clear(){
     this.data.forEach(item => {
           item.value = '';
      });
     this.num++;
     for(let i in this.queryModel){
         this.queryModel[i] = '';
     }
    },
   async sure(){
        this.data.forEach(item=>{
            for(let i in this.queryModel){
                if(item.table === i){
                    this.queryModel[i] = item.value
                }
            }
        })
        if(!this.queryModel.goodsName) return this.$message.warning('请输入商品名称');
        let res =  await insertGoodsList(this.queryModel)
        if(res.code!==100) return this.$message.error(res.msg);
        this.$message.success(res.msg);
        this.clear();
    }
}
}
</script>

<style lang="scss" scoped>
.container{
    widows: 100%;
    height: 100%;
    background: url("~@/assets/rege_bg.webp") no-repeat 0 0;
    background-size: 100% 100%;
    .box{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        padding: 50px;
        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 100%;
            height: 100%;
            background-color: rgba(255,255,255,0.5);
            color: #000;
            font-size: 32px;
            border-radius: 15px;
            .wrap{
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: space-between;
                align-content: flex-start;
                flex-wrap: wrap;
                > div{
                    flex: 0 0 49%;
                    height: 52px;
                    display: flex;
                    align-items: center;
                    > div{
                        width: 0;
                        flex: 0 0 183px;
                        font-size: 26px;
                    }
                    .el-input,.el-textarea{
                        flex: 1 1 auto;
                        width: 0;
                    }
                }
            }
            .btns{
                width: 100%;
                height: auto;
                display: flex;
                align-items: center;
                justify-content: center;
                .el-button{
                    width: 30%;
                }
            }
        }
    }
}
</style>
